<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .baidu {
            width: 560px;
            height: 305px;
            border: 1px solid red;
            overflow: hidden;
            cursor: pointer;
            position: relative;
        }
        
        #pics {
            width: 560px;
        }
        
        #left,
        #right {
            color: red;
            font-size: 100px;
            text-decoration: none;
            position: absolute;
            top: 50%;
            margin: -50px;
        }
        
        #left {
            left: 30px;
        }
        
        #right {
            right: 30px;
        }
    </style>
</head>

<body>
    <div class="baidu">
        <img src="img/1.jpeg" alt="" id="pics">
        <a href="javascript:;" id="left">&lt;</a>
        <a href="javascript:;" id="right">&gt;</a>
    </div>
</body>

</html>
<script>
    //一.总结if语句的特点：
    //1.任意值当做if语句的条件，但结果一定是布尔值。
    //2.if语句的else可以省略
    //3.将最大的可能给if语句,else短路操作。
    //4.嵌套优于多条件，不适合嵌套过深。

    // if (3 > 2) {
    //     console.log(1);
    // }
    // if (4 > 3) {
    //     console.log(2);
    // }
    // if (5 > 4) {
    //     console.log(3);
    // }
    //上面的三个if语句都会执行。单独

    // if (3 > 2) {
    //     console.log(1); //满足，if语句就结束
    // } else if (4 > 3) {
    //     console.log(2);
    // } else if (5 > 4) {
    //     console.log(3);
    // }
    //多条件满足一个条件，if语句就结束了。 整体的写法


    //二.案例 - 简单的图片切换
    //获取标签元素。
    var num = 1;
    right.onclick = function() { //点击右箭头触发大括号里面的代码
        num++; //num每次点击+1
        if (num > 4) { //如果num>4,重置图片的位置。
            num = 1;
        }
        pics.src = 'img/' + num + '.jpeg'; //重新给图片的src进行赋值。
    };

    left.onclick = function() {
        num--;
        if (num < 1) {
            num = 4;
        }
        pics.src = 'img/' + num + '.jpeg';
    }
</script>